<template>
  <div class="dashboard-container">
    <el-row :gutter="20">
      <!-- 左侧用户列表 -->
      <el-col :xs="24" :sm="8" :md="6" :lg="5" class="user-list-container">
        <UserList @select-user="onSelectUser" />
      </el-col>
      
      <!-- 右侧用户数据展示 -->
      <el-col :xs="24" :sm="16" :md="18" :lg="19">
        <div v-if="selectedUserId" class="user-dashboard-container">
          <UserDashboard :user-id="selectedUserId" />
        </div>
        <div v-else class="platform-overview-container">
          <PlatformStats :date-range="dateRange" />
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import UserList from '../components/visualization/UserList.vue';
import UserDashboard from '../components/visualization/UserDashboard.vue';
import PlatformStats from '../components/visualization/PlatformStats.vue';

// 当前选中的用户ID
const selectedUserId = ref(null);

// 日期范围 - 默认为最近一个月
const dateRange = ref({
  startDate: new Date(Date.now() - 30 * 24 * 60 * 60 * 1000).toISOString().split('T')[0],
  endDate: new Date().toISOString().split('T')[0]
});

// 用户选择事件处理
const onSelectUser = (userId) => {
  selectedUserId.value = userId;
};
</script>

<style scoped>
.dashboard-container {
  padding: 20px;
  height: 100%;
  min-height: calc(100vh - 60px);
  background-color: #f5f7fa;
}

.user-list-container {
  height: calc(100vh - 60px);
  overflow-y: auto;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.user-dashboard-container {
  height: 100%;
}

.platform-overview-container {
  height: 100%;
}

.empty-state {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 100px 0;
}
</style>